<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts 实例</title>
    <script src="https://cdn.staticfile.net/jquery/2.2.4/jquery.min.js"></script>
    <!-- 引入 echarts.js -->
    <script src="https://cdn.staticfile.net/echarts/4.3.0/echarts.min.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));

    $.when(
        $.getScript('https://www.runoob.com/static/js/timelineGDP.js'),
        $.getScript('https://www.runoob.com/static/js/draggable.js')
    ).done(function () {

        draggable.init(
            $('div[_echarts_instance_]')[0],
            myChart,
            {
                width: 700,
                height: 400,
                throttle: 70
            }
        );

        myChart.hideLoading();



        option = {
            baseOption: {
                title : {
                    text: '南丁格尔玫瑰图',
                    subtext: '纯属虚构',
                    x:'center'
                },
                tooltip : {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                legend: {
                    data:['rose1','rose2','rose3','rose4','rose5','rose6','rose7','rose8']
                },
                toolbox: {
                    show : true,
                    feature : {
                        mark : {show: true},
                        dataView : {show: true, readOnly: false},
                        magicType : {
                            show: true,
                            type: ['pie', 'funnel']
                        },
                        restore : {show: true},
                        saveAsImage : {show: true}
                    }
                },
                calculable : true,
                series : [
                    {
                        name:'半径模式',
                        type:'pie',
                        roseType : 'radius',
                        label: {
                            normal: {
                                show: false
                            },
                            emphasis: {
                                show: true
                            }
                        },
                        lableLine: {
                            normal: {
                                show: false
                            },
                            emphasis: {
                                show: true
                            }
                        },
                        data:[
                            {value:10, name:'rose1'},
                            {value:5, name:'rose2'},
                            {value:15, name:'rose3'},
                            {value:25, name:'rose4'},
                            {value:20, name:'rose5'},
                            {value:35, name:'rose6'},
                            {value:30, name:'rose7'},
                            {value:40, name:'rose8'}
                        ]
                    },
                    {
                        name:'面积模式',
                        type:'pie',
                        roseType : 'area',
                        data:[
                            {value:10, name:'rose1'},
                            {value:5, name:'rose2'},
                            {value:15, name:'rose3'},
                            {value:25, name:'rose4'},
                            {value:20, name:'rose5'},
                            {value:35, name:'rose6'},
                            {value:30, name:'rose7'},
                            {value:40, name:'rose8'}
                        ]
                    }
                ]
            },
            media: [
                {
                    option: {
                        legend: {
                            right: 'center',
                            bottom: 0,
                            orient: 'horizontal'
                        },
                        series: [
                            {
                                radius: [20, '50%'],
                                center: ['25%', '50%']
                            },
                            {
                                radius: [30, '50%'],
                                center: ['75%', '50%']
                            }
                        ]
                    }
                },
                {
                    query: {
                        minAspectRatio: 1
                    },
                    option: {
                        legend: {
                            right: 'center',
                            bottom: 0,
                            orient: 'horizontal'
                        },
                        series: [
                            {
                                radius: [20, '50%'],
                                center: ['25%', '50%']
                            },
                            {
                                radius: [30, '50%'],
                                center: ['75%', '50%']
                            }
                        ]
                    }
                },
                {
                    query: {
                        maxAspectRatio: 1
                    },
                    option: {
                        legend: {
                            right: 'center',
                            bottom: 0,
                            orient: 'horizontal'
                        },
                        series: [
                            {
                                radius: [20, '50%'],
                                center: ['50%', '30%']
                            },
                            {
                                radius: [30, '50%'],
                                center: ['50%', '70%']
                            }
                        ]
                    }
                },
                {
                    query: {
                        maxWidth: 500
                    },
                    option: {
                        legend: {
                            right: 10,
                            top: '15%',
                            orient: 'vertical'
                        },
                        series: [
                            {
                                radius: [20, '50%'],
                                center: ['50%', '30%']
                            },
                            {
                                radius: [30, '50%'],
                                center: ['50%', '75%']
                            }
                        ]
                    }
                }
            ]
        };
        myChart.setOption(option);

    });
</script>
</body>
</html>